<script setup>
import { ref, reactive } from "vue";
// import dayjs from "dayjs"
// import { useI18n } from "vue-i18n"
import Header from "@/components/Header.vue"
import { getWithdrawRecord } from "@/api"
const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const state = reactive({
    page: 0,
    size: 20,
    begin_date: '',
    end_date: ''
})
const onLoad = () => {
    console.log(1)
    // 异步更新数据
    // setTimeout 仅做示例，真实场景中一般为 ajax 请求
    getWithdrawRecord(state).then(res => {
        list.value = [
            ...list.value,
            ...res.content
        ]
        state.page += 1;
        loading.value = false;
        if (list.value.length >= res.total) {
            finished.value = true;
        }

        console.log(finished.value)

    })

};
</script>

<style scoped>
.APPROVE {
    color: #fff;
}

.REJECT {
    color: rgb(255, 0, 0);
}

.NORMAL {
    color: #2a28c3;
}
</style>

<template>
    <Header :title="$t('Withdraw Record')"></Header>
    <van-list v-model:loading="loading" :finished="finished" :finished-text="list.length > 10 ? $t('No more') : ''"
        :loading-text="$t('Loading...')" @load="onLoad">

        <div class="mx-2 mt-2 flex justify-between items-center text-[16px]" v-for="item in list" :key="item">
            <div class="left">
                <div>{{ item.orderId }}</div>
                <div class=" text-[12px] flex items-center gap-0.5 text-nowrap">
                    <div class="bg-[#1E88FF] py-[2px] px-[10px] rounded-full" :class="item.status"
                        style="max-width: fit-content;">
                        {{ item.status == 'APPROVE' ? $t('Waiting for verification') : item.status == 'NORMAL' ?
        $t('Verification Passed') :
        $t('Verification failed') }}
                    </div>
                    <div class="text-[#333] ">
                        {{ item.type == 'BANKCARD' ? $t('Bank card cash withdrawal') : "USDT" }}
                    </div>
                </div>
            </div>
            <div class="text-black font-medium">${{ item.amount }}</div>
        </div>

    </van-list>
    <van-empty :description="$t('No more')" v-if="!loading && list.length==0" />
</template>
